<template name="basics">
	<view style="width:93%;margin: auto;">
        <view class="index-header">
            <swiper class="swiper" @change="change">
                <swiper-item>
                    <u-grid :col="3" @click="clickbanner" hover-class="hover-class">
                        <u-grid-item v-for="(item, index) in list" :index="index" :key="index">
                            <u-icon :name="item" :size="30" :customStyle="{paddingTop:20+'rpx'}"></u-icon>
                            <text class="grid-text">{{ listName[index] }}</text>
                        </u-grid-item>
                    </u-grid>
                </swiper-item>
            </swiper>
        </view>
		<scroll-view scroll-y class="page" @scrolltolower="loadData">
			<view class="search">
				<u-search placeholder="搜索信息"  :clearabled="true" v-model="keyword" @search="clickSearch" @custom="clickSearch" ></u-search>
			</view>
			<view class="u-page">
				<view class="index-item" v-for="(item, index) in searchData" :key="index" @tap="goInfo(item.uid)">
					<view class="title">
						<view class="text-cut" v-html="item.title"></view>
					</view>
					<view class="content">
						<image v-if="item.photoUrl" :src="item.photoUrl" mode="aspectFill"></image>
						<view class="desc">
							<view>
                                <view class="text-content" v-html="item.summary" ></view>
                            </view>
														
							<view style="margin-bottom: 5px;">
                                <u-tag :text="item.blogSortName" plain shape="circle" size="mini" type="warning" :name="index"></u-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
            <view class="footer">
                <view class="loadStyle" v-if="!isEnd && !loading">下拉加载</view>
                <view class="loadStyle" v-if="!isEnd && loading">正在加载中</view>
                <view class="loadStyle" v-if="isEnd">我也是有底线的~</view>	
            </view>
				
		</scroll-view>
	</view>	
</template>

<script>
	import {searchBlog} from "../../api/search";
	import {getNewBlog, getBlogByLevel,getWebConfig} from "../../api/index";
	export default {
		name: "search",
		data() {
			return {
                current: 0,
                list: [
                    'calendar', 'order', 'download', 
                    'clock', 'eye', 'red-packet', 
                    'heart', 'bell','edit-pen'
                ],
                listName:[
                    '房贷计算器', '电费计算器', '网速测试',
                    '每日饮水量计算', '手持弹幕', '人民币大写转换', 
                    '标准体重计算','订阅提醒','电子签名'
                ],
				keyword: "使用说明",
				searchData: [],
				total: 0,
				currentPage: 1,
				pageSize: 4,
				isEnd: false, //是否到底底部了
				loading: false, //是否正在加载
				fristData:[],
				showClearIcon: true,
			}
		},
		onLoad(option) {
			this.keyword = option.keyword??'使用说明'
            this.getBlogData()
			//this.search();
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
              withShareTicket: true,
              menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            
		},
        onPullDownRefresh() {
        		console.log('refresh');
                this.clickSearch()
                setTimeout(function () {
                    uni.stopPullDownRefresh();
                }, 1000);
        },
        // #ifdef MP-WEIXIN
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
              console.log(res.target)
            }
            return {
              title: '给您分享个好工具',
              path: '/pages/index/index'
            }
        },
        // #endif
        filters:{
            formatRichText(html){
                let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
                    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                    return match;
                });
                newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
                    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                    return match;
                });
                newContent = newContent.replace(/<br[^>]*\/>/gi, '');
                newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
                return newContent;
            }
        },
		methods: {
            change(e) {
                this.current = e.detail.current;
            },
			loadData: function() {
				console.log("上拉加载数据", this.searchData.length, this.total)
				if(this.searchData.length >= this.total) {
					return;
				}
				this.currentPage = this.currentPage + 1;
				this.search();
			},
			getBlogData() {
				var that = this
				let params = {}
				params.level = 1;
				params.useSort = 1;
                console.log('getLevelBlog start')
				getWebConfig(params).then(res =>{
					if(res.code == this.$ECode.SUCCESS) {
						this.keyword = res.data.author;
                            console.log('getLevelBlog end')
                            this.search();
					}
				})
                
			},
			clickSearch() {
				// 点击搜索按钮，清空原来搜索的内容
                console.log("search");
				this.searchData = []
				this.currentPage = 1
				this.search()
			},
			clickbanner(name){
                var id = name + 1
				if(id == 1){
					uni.navigateTo({
						url: '/pages/tools/house',
					});
				}else if(id == 2){
					uni.navigateTo({
						url: '/pages/tools/electric',
					});
				}else if(id == 3){
					uni.navigateTo({
						url: '/pages/tools/networkspeed',
					});
				}else if(id == 4){
					uni.navigateTo({
						url: '/pages/tools/drinkingwater',
					});
				}else if(id == 5){
					uni.navigateTo({
						url: '/pages/tools/handheldbarrage',
					});
				}else if(id == 6){
					uni.navigateTo({
						url: '/pages/tools/rmbcapital',
					});
				}else if(id == 7){
					uni.navigateTo({
                        url: '/pages/tools/standardweight',
					});
				}else if(id == 8){
					uni.navigateTo({
                        url: '/pages/tools/subscribe',
					});
				}else{
					uni.navigateTo({
						url: '/pages/tools/phoneSign',
					});
				}
				
			},
			clearInput: function(event) {
				console.log('input event');
			    this.keyword = event.detail.value;
			    if (event.detail.value.length > 0) {
			        this.showClearIcon = true;
			    } else {
			        this.showClearIcon = false;
			    }
			},
			clearIcon: function() {
			    this.keyword = '';
			    this.showClearIcon = false;
			},
			goInfo(blogUid) {
				console.log("跳转", blogUid)
				uni.navigateTo({
					url: '/pages/info/home?blogUid=' + blogUid,
				});
			},
			search() {
				if(this.keyword == "") {
					uni.showToast({
						icon: "none",
						title: "搜索内容不能为空",
					})
					return;
				}
				let params = {}
				params.currentPage = this.currentPage
				params.pageSize = this.pageSize
				params.keywords = this.keyword;
                console.log('search',params.keywords)
				searchBlog(params).then(res =>{	
					if(res.code == "success") {
                        console.log('search end',this.keyword)
						var newData = this.searchData.concat(res.data.blogList);
						this.searchData = newData;						
						this.total = res.data.total;
						this.currentPage = res.data.currentPage;
						this.pageSize = res.data.pageSize;	
					}
					//全部加载完毕
					if (this.searchData.length >= this.total) {
					  this.isEnd = true;
					} else {
						this.isEnd = false;
					}
					this.loading = false;
					console.log(this.isEnd, this.loading)
				})
			},
            
            
		}
	}
</script>


<style scoped lang="scss">
    view{
    //background-color: #f2f2f2;
        .swiper {
            background-color: #ffffff;
            width: 98%;
            margin: auto;
        }
    }
     .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
    	
    	.swiper {
    		height: 480rpx;
    	}
    	
        .page {
            .search{
                width: 90%;
                margin: auto;
                padding-bottom: 5rpx;
            }
           .u-page{
               background-color: #f2f2f2;
               padding: 5rpx;
               .index-item {
                   border-radius: 15rpx;
                   padding: 10rpx;
                   background-color: #ffffff;
                   
                   width: 96%;
                   margin: 5px auto;
                   display: flex;
                   flex-flow: column;
                   .title{
                       font-size: 36rpx;
                       flex: 2;
                       padding: 10rpx;
                   }
                   .content{
                       margin: 5rpx 10rpx;
                       flex: 2;
                       flex-flow:row;
                       display: flex;
                       
                       image {
                           flex: 1;
                           height: 150rpx;
                           border-radius: 10px;
                       }
                       .desc {
                           margin: 0rpx 10rpx;
                           flex: 2;
                           display: flex;
                           justify-content: space-between;
                           align-items: flex-start;
                           flex-direction: column;
                           .text-content{
                               font-size:23rpx;
                               display: -webkit-box; /*弹性伸缩盒子模型显示*/
                                -webkit-box-orient: vertical; /*排列方式*/ 
                                -webkit-line-clamp: 3; /*显示文本行数(这里控制多少行隐藏)*/
                                overflow: hidden; /*溢出隐藏*/
                           }
                       }
                       
                   }
               }
           }
           
           .footer {
               margin-top: 20rpx;
               width: 100%;
               height: 60rpx;
               text-align: center;		
               color: #bfbfbf;
           } 
        }
        
        
</style>
